<template>
  <div class="home">
    <home-menu></home-menu>
    <div class="home-swiper">
      <div class="home-btn">
        <img class="home-btn-img" id="id" src="static/imgs/home-btn.png" @click="homeBtn(id)"/>
      </div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in swiperImg">
            <router-link :to="{path:'/ruleLaw',query:{id:0}}">
              <img :src="item.img"/>
            </router-link>
          </div>
        </div>
        <div class="swiper-pagination" id="swiper"></div>
      </div>
      </div>
      <div class="common-title">
        <div class="com-tit-left">
          <span class="com-tit-span"></span>
          <h3 class="com-tit-h3">图文资讯</h3>
        </div>
      </div>
      <div class="com-theme">
        <ul class="com-theme-ul">
          <li class="com-theme-li" v-for="(item,index) in lis" :key="index">
            <router-link :to="{path:'/ruleLaw',query:{id:0}}">
          <h3 class="com-theme-h3">{{item.str}}</h3>
          <ul class="theme-img-ul">
            <li class="theme-img-li" v-for="item1 in (item.img)">
                <img :src="item1"/>
            </li>
          </ul>
            </router-link>
        </li>
        </ul>
      </div>
      <div class="common-title">
        <div class="com-tit-left">
          <span class="com-tit-span"></span>
          <h3 class="com-tit-h3">法治要闻</h3>
        </div>
        <div class="com-tit-right">
          <a href="##">查看更多
            <img src="static/imgs/home-more.png" alt="">
          </a>
        </div>
      </div>
      <div class="com-news">
        <ul class="com-news-ul">
          <li class="com-news-li" v-for="(item,index) in newLis" :key="index">
            <router-link :to="{path:'/ruleLaw',query:{id:0}}" class="com-news-router">
            {{item}}
            </router-link>
            </li>
        </ul>
      </div>
      <copy-right></copy-right>
    </div>

</template>

<script>
  import copyRight from '@/pages/common/copyright'
  import homeMenu from '@/pages/home/menu'
  import Swiper from "swiper"    /*引入swiper*/
  import data from 'static/data.json'
    export default {
        name: "home",
        data(){
            return {
              id:1,
              lis:[
                {
                  str:"司法局开展全民国家安全教育日法治宣传",
                  img:["static/imgs/theme1.jpg","static/imgs/theme2.jpg","static/imgs/theme3.jpg"],
                  id:0
                },
                {
                  str:"2019年“4·15”全民国家安全教育日宣传挂图",
                  img:["static/imgs/theme2.jpg","static/imgs/theme3.jpg"],
                  id:1
                },
                {
                  str:"司法局开展全民国家安全教育日法治宣传",
                  img:["static/imgs/theme3.jpg","static/imgs/theme2.jpg","static/imgs/theme1.jpg"],
                  id:2
                },
              ],
              newLis:[
                "开设“法治讲坛” 推进法治化进程",
                "司法局组织开展丰富多彩的“4.15”全民国家安…",
                "司前司法所开展国家安全普法进校园",
                "司法局法律服务志愿者开展“4.15国家安全教…",
                "岚谷乡开展平安校园建设宣传演练活动…",
                "司法所开展公共交通安全法治宣传",
                "全面开展移风易俗、文明祭扫清明节安全法治…",
                "祖墩司法所开展法治宣传活动"
              ],
              ruleNews:data.ruleNews,
              swiperImg:[
                {
                  id:0,
                  img:"static/imgs/swiper1.png"
                },
                {
                  id:1,
                  img:"static/imgs/swiper2.png"
                },
                {
                  id:2,
                  img:"static/imgs/swiper3.png"
                }
              ]
            }
        },
        created(){

        },

        mounted(){
          new Swiper ('.swiper-container', {
            autoplay: {
              disableOnInteraction: false,
            },
            loop: true,
            pagination: {
              el: '.swiper-pagination',
            },
          })
        },
        components: {
          copyRight,
          homeMenu
        },
        methods:{//
          homeBtn(i){
            i++;
            this.id = i;
            if(i%2 == 0){
              document.querySelector(".home-menu").style.display="block";
              document.querySelector(".home-btn").style.zIndex = "1000";
              document.querySelector(".home-btn").style.background="transparent";
            }else{
              document.querySelector(".home-menu").style.display="none";
              document.querySelector(".home-btn").style.background="rgba(0, 0, 0, 0.3835)";
            }
          }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../node_modules/swiper/dist/css/swiper.css";
  .home{
    max-width:750px;
    margin: 0 auto;

    .home-swiper{
      position: relative;
      .home-btn{
        z-index: 100;
        width:100%;
        height:3rem;
        background:rgba(0,0,0,0.3835);
        position:absolute;
        left:0;top:0;

        img{
          display: flex;
          width:1.6rem;
          height:1.2rem;
          float:right;
          padding-top: 0.7rem;
          padding-right: 1rem;
        }
      }
      width:100%;

    } .swiper-container {
        width: 100%;
        height: 20rem;
        .swiper-slide img{
          display: block;
          width:100%;
          height:100%;
          margin:0rem auto;
        }
        .swiper-pagination{
          width:8.5rem;
          height:2.5rem;
          background:rgba(0,0,0,.3);
          left: 14.5rem;
          bottom:1rem;
          border-radius: 1.25rem;
          display: none;
          #swiper > .swiper-pagination-bullet{
            display: block;
            background:black;
            width:.5rem;
            height:.5rem;
            border-radius: 50%;
          }
          #swiper .swiper-pagination-bullet-active{
            background:white;
          }
        }
      }
    .com-theme{
      background:white;
      width:100%;
      padding-top:.1rem;
      .com-theme-ul{
        padding:.3rem 1.8rem 2rem;
        .com-theme-li{
          padding-top:1.1rem;
          border-bottom:.2rem solid #FFFFFF;
          .com-theme-h3{
            display: block;
            font-size: 1.5rem;
            color:#222222;
            line-height: 1.7rem;
            font-weight: 600;
          }
          .theme-img-ul{
            display: flex;
            align-items: center;
            .theme-img-li{
              img{
                display: block;
                width:9rem;
                height:5.8rem;
                margin:.5rem;
                margin-left:0;
              }
            }
          }
        }
        .com-theme-li:last-child{
          border:none;
        }
      }
    }
    .com-news{
      width:100%;
      background:white;
      .com-news-ul{
        padding:.5rem 1.8rem 1rem;
        .com-news-li{
          .com-news-router{
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size:1.4rem;
            color:#666666;
            line-height:2rem;
            padding:1rem 0;
            border-bottom:.1rem dotted #979797;
          }
        }
        .com-news-li:last-child{
          border:none;
        }

      }
    }
    .common-title{
    width:100%;
    height:4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .com-tit-left{
      padding-left:1rem;
      display: flex;
      align-items: center;
      .com-tit-span{
        display: block;
        width:.3rem;
        height:1.8rem;
        background:#33568D;
        margin-right:.5rem;
      }
      .com-tit-h3{
        font-size:1.8rem;
        color:#222222;
        line-height: 1.8rem;
        font-weight: 600;
      }
    }
    .com-tit-right{
      padding-right:1rem;
      display: flex;
      align-items: center;
      a{
        display: flex;
        font-size: 1.4rem;
        align-items: center;
        color:#33568D;
        img{
          display: block;
          width:1rem;
          height:1rem;
          margin-left:.25rem;
        }
      }
    }

  }

  }

</style>
